<template>
  <view class="dryclean-service">
    <!-- 导航栏 -->
    <u-navbar title="干洗服务" :placeholder="true" @leftClick="goBack">
    </u-navbar>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 基本信息 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">联系人<text class="required">*</text></text>
          <u-input 
            v-model="formData.contactName" 
            placeholder="请输入联系人姓名"
            border="none"
            class="input-field"
            placeholder-class="custom-placeholder"
            input-align="right"
          ></u-input>
        </view>
        
        <view class="form-item">
          <text class="label">联系方式<text class="required">*</text></text>
          <u-input 
            v-model="formData.contactPhone" 
            placeholder="请输入手机号码"
            border="none"
            class="input-field"
            type="number"
            placeholder-class="custom-placeholder"
            input-align="right"
          ></u-input>
        </view>
        
        <view class="form-item">
          <text class="label">衣物数量<text class="required">*</text></text>
          <u-input 
            v-model="formData.clothingCount" 
            placeholder="请输入衣物数量"
            border="none"
            class="input-field"
            type="number"
            placeholder-class="custom-placeholder"
            input-align="right"
          ></u-input>
        </view>
        
        <view class="form-item">
          <text class="label">上门时间<text class="required">*</text></text>
          <view class="time-picker" @click="showPickupTimePicker">
            <text class="time-text" :class="{ placeholder: !formData.pickupTime }">
              {{ formData.pickupTime || '请选择上门时间' }}
            </text>
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">取物时间<text class="required">*</text></text>
          <view class="time-picker" @click="showReturnTimePicker">
            <text class="time-text" :class="{ placeholder: !formData.returnTime }">
              {{ formData.returnTime || '请选择取物时间' }}
            </text>
            <u-icon name="arrow-right" size="16" color="#999"></u-icon>
          </view>
        </view>
        
        <view class="form-item remark-item">
          <text class="label">备注信息</text>
          <u-textarea 
            v-model="formData.remark" 
            count
            :maxlength="200"
            class="textarea-field"
            text-align="right"
          ></u-textarea>
        </view>
      </view>

      <!-- 注意事项 -->
      <view class="notice-section">
        <view class="section-title">
          <text class="title-text">注意事项</text>
        </view>
        
        <view class="notice-content">
          <view class="notice-item">
            <text class="notice-dot">•</text>
            <text class="notice-text">请确保衣物已检查口袋，贵重物品请自行保管</text>
          </view>
          <view class="notice-item">
            <text class="notice-dot">•</text>
            <text class="notice-text">上门时间请选择您方便的时间段，我们会提前联系确认</text>
          </view>
          <view class="notice-item">
            <text class="notice-dot">•</text>
            <text class="notice-text">取物时间一般为干洗完成后1-2天，具体时间会电话通知</text>
          </view>
          <view class="notice-item">
            <text class="notice-dot">•</text>
            <text class="notice-text">如有特殊要求或衣物污渍，请在备注中详细说明</text>
          </view>
          <view class="notice-item">
            <text class="notice-dot">•</text>
            <text class="notice-text">服务费用根据衣物类型和数量确定，具体价格上门评估</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-section">
      <u-button 
        type="primary" 
        @click="submitForm"
        :disabled="!isFormValid"
        class="submit-btn"
      >
        提交申请
      </u-button>
    </view>

    <!-- 日期时间选择器 -->
    <u-datetime-picker
      :show="showPickupDatetimePicker"
      mode="datetime"
      @confirm="onPickupDatetimeConfirm"
      @cancel="showPickupDatetimePicker = false"
    ></u-datetime-picker>
    
    <u-datetime-picker
      :show="showReturnDatetimePicker"
      mode="datetime"
      @confirm="onReturnDatetimeConfirm"
      @cancel="showReturnDatetimePicker = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  name: 'DrycleanService',
  
  data() {
    return {
      // 表单数据
      formData: {
        contactName: '',      // 联系人
        contactPhone: '',     // 联系方式
        clothingCount: '',    // 衣物数量
        pickupTime: '',       // 上门时间
        returnTime: '',       // 取物时间
        remark: ''           // 备注信息
      },
      
      // 日期时间选择器控制
      showPickupDatetimePicker: false,   // 上门时间选择器显示状态
      showReturnDatetimePicker: false,   // 取物时间选择器显示状态
    }
  },
  
  computed: {
    // 表单验证
    isFormValid() {
      return this.formData.contactName && 
             this.formData.contactPhone && 
             this.formData.clothingCount &&
             this.formData.pickupTime && 
             this.formData.returnTime
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 显示上门时间选择器
    showPickupTimePicker() {
      this.showPickupDatetimePicker = true
    },
    
    // 显示取物时间选择器
    showReturnTimePicker() {
      this.showReturnDatetimePicker = true
    },
    
    // 上门时间选择确认
    onPickupDatetimeConfirm(e) {
      console.log('pickup datetime selected:', e)
      this.formData.pickupTime = this.formatDateTime(e.value)
      this.showPickupDatetimePicker = false
    },
    
    // 取物时间选择确认
    onReturnDatetimeConfirm(e) {
      console.log('return datetime selected:', e)
      this.formData.returnTime = this.formatDateTime(e.value)
      this.showReturnDatetimePicker = false
    },
    
    // 格式化日期时间
    formatDateTime(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    // 提交表单
    async submitForm() {
      // 表单验证
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      // 手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.formData.contactPhone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      // 衣物数量验证
      const count = parseInt(this.formData.clothingCount)
      if (isNaN(count) || count <= 0) {
        uni.showToast({
          title: '请输入正确的衣物数量',
          icon: 'none'
        })
        return
      }
      
      try {
        // 显示加载提示
        uni.showLoading({
          title: '提交中...'
        })
        
        // 模拟提交请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 隐藏加载提示
        uni.hideLoading()
        
        // 显示成功提示
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
        
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading()
        
        // 显示错误提示
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dryclean-service {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.form-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.form-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  
  .form-item {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx dashed #e0e0e0;
    
    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }
    
    .label {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
      min-width: 140rpx;
      margin-right: 20rpx;
      
      .required {
        color: #ff4757;
        font-weight: bold;
        margin-left: 4rpx;
      }
    }
    
    .input-field {
      background: #f8f9fa;
      border-radius: 8rpx;
      padding: 20rpx;
      flex: 1;
      text-align: right;
      font-size: 26rpx !important;
    }
    
    .textarea-field {
      background: #f8f9fa;
      border-radius: 8rpx;
      padding: 20rpx;
      min-height: 120rpx;
      text-align: right;
      font-size: 26rpx !important;
      box-sizing: border-box;
    }
    
    // 其他输入框的placeholder样式（无padding）
    ::v-deep .u-input .custom-placeholder {
      font-size: 26rpx !important;
      text-align: right !important;
      color: #999 !important;
    }
    
    &.remark-item {
      flex-direction: column;
      align-items: flex-start;
      
      .label {
        margin-bottom: 20rpx;
        margin-top: 0;
      }
      
      .textarea-field {
        width: calc(100% - 40rpx) !important;
        margin-top: 0;
        margin-right: 20rpx;
        flex: none !important;
        display: block;
        box-sizing: border-box;
        padding: 20rpx;
      }
      
      ::v-deep .u-textarea {
        flex: none !important;
        padding: 0 !important;
        width: 100% !important;
      }
      
      ::v-deep .u-textarea__field {
        width: 100% !important;
        flex: none !important;
      }
      
      // 专门为u-textarea的placeholder添加padding
      ::v-deep .u-textarea .custom-placeholder {
        font-size: 26rpx !important;
        text-align: right !important;
        color: #999 !important;
        padding: 20rpx !important;
      }
    }
    
    .time-picker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      
      .time-text {
        font-size: 26rpx;
        color: #333;
        flex: 1;
        text-align: right;
        margin-right: 10rpx;
        
        &.placeholder {
          color: #999;
          font-size: 26rpx;
        }
      }
    }
  }
}

.notice-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    margin-bottom: 20rpx;
    
    .title-text {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .notice-content {
    .notice-item {
      display: flex;
      margin-bottom: 15rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .notice-dot {
        color: #4D69DC;
        font-size: 26rpx !important;
        margin-right: 10rpx;
        margin-top: 4rpx;
      }
      
      .notice-text {
        font-size: 24rpx !important;
        color: #666;
        line-height: 1.5;
        flex: 1;
      }
    }
  }
}

.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
  }
}
</style>
  name: 'DrycleanService',
  
  data() {
    return {
      // 表单数据
      formData: {
        contactName: '',      // 联系人
        contactPhone: '',     // 联系方式
        clothingCount: '',    // 衣物数量
        pickupTime: '',       // 上门时间
        returnTime: '',       // 取物时间
        remark: ''           // 备注信息
      },
      
      // 日期时间选择器控制
      showPickupDatetimePicker: false,   // 上门时间选择器显示状态
      showReturnDatetimePicker: false,   // 取物时间选择器显示状态
    }
  },
  
  computed: {
    // 表单验证
    isFormValid() {
      return this.formData.contactName && 
             this.formData.contactPhone && 
             this.formData.clothingCount &&
             this.formData.pickupTime && 
             this.formData.returnTime
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 显示上门时间选择器
    showPickupTimePicker() {
      this.showPickupDatetimePicker = true
    },
    
    // 显示取物时间选择器
    showReturnTimePicker() {
      this.showReturnDatetimePicker = true
    },
    
    // 上门时间选择确认
    onPickupDatetimeConfirm(e) {
      console.log('pickup datetime selected:', e)
      this.formData.pickupTime = this.formatDateTime(e.value)
      this.showPickupDatetimePicker = false
    },
    
    // 取物时间选择确认
    onReturnDatetimeConfirm(e) {
      console.log('return datetime selected:', e)
      this.formData.returnTime = this.formatDateTime(e.value)
      this.showReturnDatetimePicker = false
    },
    
    // 格式化日期时间
    formatDateTime(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    // 提交表单
    async submitForm() {
      // 表单验证
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      // 手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.formData.contactPhone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      // 衣物数量验证
      const count = parseInt(this.formData.clothingCount)
      if (isNaN(count) || count <= 0) {
        uni.showToast({
          title: '请输入正确的衣物数量',
          icon: 'none'
        })
        return
      }
      
      try {
        // 显示加载提示
        uni.showLoading({
          title: '提交中...'
        })
        
        // 模拟提交请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 隐藏加载提示
        uni.hideLoading()
        
        // 显示成功提示
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
        
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading()
        
        // 显示错误提示
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dryclean-service {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.form-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.form-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  
  .form-item {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx dashed #e0e0e0;
    
    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }
    
    .label {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
      min-width: 140rpx;
      margin-right: 20rpx;
      
      .required {
        color: #ff4757;
        font-weight: bold;
        margin-left: 4rpx;
      }
    }
    
    .input-field {
      background: #f8f9fa;
      border-radius: 8rpx;
      padding: 20rpx;
      flex: 1;
      text-align: right;
      font-size: 26rpx !important;
    }
    
    .textarea-field {
      background: #f8f9fa;
      border-radius: 8rpx;
      padding: 20rpx;
      min-height: 120rpx;
      text-align: right;
      font-size: 26rpx !important;
      box-sizing: border-box;
    }
    
    // 其他输入框的placeholder样式（无padding）
    ::v-deep .u-input .custom-placeholder {
      font-size: 26rpx !important;
      text-align: right !important;
      color: #999 !important;
    }
    
    &.remark-item {
      flex-direction: column;
      align-items: flex-start;
      
      .label {
        margin-bottom: 20rpx;
        margin-top: 0;
      }
      
      .textarea-field {
        width: calc(100% - 40rpx) !important;
        margin-top: 0;
        margin-right: 20rpx;
        flex: none !important;
        display: block;
        box-sizing: border-box;
        padding: 20rpx;
      }
      
      ::v-deep .u-textarea {
        flex: none !important;
        padding: 0 !important;
        width: 100% !important;
      }
      
      ::v-deep .u-textarea__field {
        width: 100% !important;
        flex: none !important;
      }
      
      // 专门为u-textarea的placeholder添加padding
      ::v-deep .u-textarea .custom-placeholder {
        font-size: 26rpx !important;
        text-align: right !important;
        color: #999 !important;
        padding: 20rpx !important;
      }
    }
    
    .time-picker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      
      .time-text {
        font-size: 26rpx;
        color: #333;
        flex: 1;
        text-align: right;
        margin-right: 10rpx;
        
        &.placeholder {
          color: #999;
          font-size: 26rpx;
        }
      }
    }
  }
}

.notice-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    margin-bottom: 20rpx;
    
    .title-text {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .notice-content {
    .notice-item {
      display: flex;
      margin-bottom: 15rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .notice-dot {
        color: #4D69DC;
        font-size: 26rpx !important;
        margin-right: 10rpx;
        margin-top: 4rpx;
      }
      
      .notice-text {
        font-size: 24rpx !important;
        color: #666;
        line-height: 1.5;
        flex: 1;
      }
    }
  }
}

.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
  }
}
</style> 